'use client'
import styles from './page.module.css'
import {
  Button,
  Card,
  Checkbox,
  Divider,
  Form,
  Image,
  Input,
  Modal,
  Typography,
  message
} from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { useRouter } from 'next/navigation'

export default function Home() {
  const router = useRouter()
  const doLogin = async (values) => {
    router.replace('/admin')
  }

  return (
    <div className={styles.page}>
      <Typography.Title
        level={2}
        style={{
          color: '#FFF',
          textAlign: 'center',
          paddingTop: 150
        }}
      >
        LBS智慧营销平台后台管理系统
      </Typography.Title>
      {/* 卡片 */}
      <Card
        style={{
          width: 600,
          margin: '0 auto'
        }}
      >
        <div style={{ display: 'flex' }}>
          {/* 左侧：图片 */}
          {/* preview={false} 关闭预览 */}
          <Image width={200} src="/img/ring.jpg" preview={false} />
          {/* 中间：分割线 */}
          <Divider type="vertical" style={{ height: 220 }} />
          {/* 右侧：表单 */}
          {/* labelCol  左侧标签文字占的列数 
            wrapperCol  右侧包裹的输入区域占的列数
          */}
          <Form
            // 监听提交成功
            onFinish={doLogin}
            style={{ flex: 1, paddingLeft: 15, paddingTop: 15 }}
            // labelCol={{
            //   span: 6
            // }}
            wrapperCol={{
              span: 24
            }}
          >
            {/* 表单项 */}
            <Form.Item
              name="aname"
              // 表单验证，required不能为空，message提示消息
              rules={[{ required: true, message: '用户名不能为空' }]}
              // 设置初始值
              // initialValue={localStorage.getItem('aname')}
            >
              <Input
                placeholder="请输入管理员用户名"
                prefix={<UserOutlined />}
              />
            </Form.Item>
            <Form.Item
              name="apwd"
              rules={[{ required: true, message: '密码不能为空' }]}
              // initialValue={localStorage.getItem('apwd')}
            >
              <Input.Password
                placeholder="请输入密码"
                prefix={<LockOutlined />}
              />
            </Form.Item>
            {/* offset 偏移量，左侧留出的空间 */}

            <Form.Item>
              {/* htmlType 设置为提交按钮，否则没有提交功能
                block 设置为100%
              */}
              <Button type="primary" block htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Card>
    </div>
  )
}
